<template>
    <div>
        <el-row>
            <el-card>
                <div style="margin-top: 15px;" id="app">
                    <el-form :inline="true" :model="selectForm" class="demo-form-inline" ref="selectFormRef">
                        <el-input
                                v-model="selectForm.id"
                                placeholder="请输入人员学号/工号"
                                style="width: 15%"
                        ></el-input>
                        <el-input
                                v-model="selectForm.name"
                                placeholder="请输入人员姓名"
                                style="width: 15%"
                        ></el-input>
                        <el-select v-model="selectForm.role" placeholder="人员类型" style="width: 15%">
                            <el-option label="外来人员" value=0></el-option>
                            <el-option label="本科生" value=1></el-option>
                            <el-option label="研究生" value=2></el-option>
                            <el-option label="教工" value=3></el-option>
                            <el-option label="职工" value=4></el-option>
                        </el-select>
                        <el-select v-model="selectForm.sex" placeholder="人员性别" style="width: 15%">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                        <el-input
                                v-model="selectForm.age"
                                placeholder="请输入人员年龄"
                                style="width: 15%"
                        ></el-input>
                        <el-button type="primary" @click="select()">查询</el-button>
                        <el-button type="primary" @click="resetSelect()">重置</el-button>
                    </el-form>
                    <el-table
                            v-loading="loading"
                            :data="tableData"
                            @selection-change="handleSelectionChange"
                            style="width: 100%">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column prop="id" label="学号/工号" sortable width="150"></el-table-column>
                        <el-table-column prop="name" label="姓名" sortable width="90"></el-table-column>
                        <el-table-column prop="age" label="年龄" sortable width="90"></el-table-column>
                        <el-table-column prop="sex" label="性别" sortable width="90"></el-table-column>
                        <el-table-column prop="role" label="人员类别" sortable width="100"></el-table-column>
                        <el-table-column prop="apartment" label="住址" sortable width="180"></el-table-column>
                        <el-table-column prop="phone" label="电话" sortable show-overflow-tooltip></el-table-column>
                        <el-table-column align="right" width="70">
                            <template slot="header">
                                <el-button type="primary" @click="save=true" size="mini" plain>添加</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="right" width="130">
                            <template slot="header">
                                <el-button type="primary" @click="exportExcel()" size="mini" plain>导出所选中信息</el-button>
                            </template>
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" plain @click="getRecord(scope.row.id)"
                                           v-if="scope.row">通行记录
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="right" width="150">
                            <template slot="header">
                                <el-button type="danger" @click="deleteMessages()" size="mini" plain>删除所选中信息</el-button>
                            </template>
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" plain @click="edit=true,getForm(scope.row.id)"
                                           v-if="scope.row&&update_button==1">修改
                                </el-button>
                                <el-button size="mini" type="danger" plain @click="deletePerson(scope.row)"
                                           v-if="scope.row&&delete_button==1">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            style="margin: 15px 0px;"
                            prev-text="上一页" next-text="下一页" background
                            layout="prev, pager, next, sizes, jumper, total"
                            :page-sizes="[5,10,20,40,100,500,50000]"
                            :page-size="pageSize"
                            :total="total"
                            :current-page="pageNow"
                            @current-change="findPage"
                            @size-change="findSize">
                    </el-pagination>
                    <el-dialog title="添加人员信息" :visible.sync="save" width="30%">
                        <el-form ref="sForm" label-width="80px" :model="saveForm">
<!--                            <el-form-item label="学号/工号" prop="id" >-->
<!--                                <el-input v-model="saveForm.id"></el-input>-->
<!--                            </el-form-item>-->
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="saveForm.name"></el-input>
                            </el-form-item>
                            <el-form-item prop="age" label="年龄:">
                                <el-input v-model="saveForm.age"></el-input>
                            </el-form-item>
                            <!-- 性别-->
                            <el-form-item prop="sex" label="性别:">
                                <el-select v-model="saveForm.sex" placeholder="性别">
                                    <el-option label="男" value=0></el-option>
                                    <el-option label="女" value=1></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="role" label="人员类别:">
                                <el-select v-model="saveForm.role" placeholder="人员类别">
                                    <el-option label="外来人员" value=0></el-option>
                                    <el-option label="本科生" value=1></el-option>
                                    <el-option label="研究生" value=2></el-option>
                                    <el-option label="教工" value=3></el-option>
                                    <el-option label="职工" value=4></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 电话-->
                            <el-form-item prop="apartment" label="住址:">
                                <el-select v-model="saveForm.apartment" placeholder="宿舍楼">
                                    <el-option label="北苑一号宿舍楼" value="A1"></el-option>
                                    <el-option label="北苑二号宿舍楼" value="A2"></el-option>
                                    <el-option label="北苑三号宿舍楼" value="A3"></el-option>
                                    <el-option label="北苑四号宿舍楼" value="A4"></el-option>
                                    <el-option label="北苑五号宿舍楼" value="A5"></el-option>
                                    <el-option label="北苑六号宿舍楼" value="A6"></el-option>
                                    <el-option label="北苑七号宿舍楼" value="A7"></el-option>
                                    <el-option label="北苑八号宿舍楼" value="A8"></el-option>
                                    <el-option label="北苑九号宿舍楼" value="A9"></el-option>
                                    <el-option label="南苑一号宿舍楼" value="B1"></el-option>
                                    <el-option label="南苑二号宿舍楼" value="B2"></el-option>
                                    <el-option label="南苑三号宿舍楼" value="B3"></el-option>
                                    <el-option label="南苑四号宿舍楼" value="B4"></el-option>
                                    <el-option label="南苑五号宿舍楼" value="B5"></el-option>
                                    <el-option label="南苑六号宿舍楼" value="B6"></el-option>
                                    <el-option label="南苑七号宿舍楼" value="B7"></el-option>
                                    <el-option label="南苑八号宿舍楼" value="B8"></el-option>
                                    <el-option label="南苑九号宿舍楼" value="B9"></el-option>
                                    <el-option label="南苑十号宿舍楼" value="B10"></el-option>
                                    <el-option label="南苑十二号宿舍楼" value="B12"></el-option>
                                    <el-option label="教职公寓" value="C1"></el-option>
                                    <el-option label="校外" value="D1"></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 邮箱-->
                            <el-form-item prop="phone" label="电话:">
                                <el-input v-model="saveForm.phone"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
            <el-button @click="save = false">取 消</el-button>
            <el-button type="primary" @click="save = false,savePerson('sForm')">确 定</el-button>
          </span>
                    </el-dialog>
                    <el-dialog title="修改人员信息" :visible.sync="edit" width="30%">
                        <el-form ref="editForm" label-width="80px" :model="eform" >
                            <el-form-item label="学号/工号" prop="id" >
                                <el-input v-model="eform.id" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="eform.name"></el-input>
                            </el-form-item>
                            <el-form-item prop="age" label="年龄:">
                                <el-input v-model="eform.age"></el-input>
                            </el-form-item>
                            <!-- 性别-->
                            <el-form-item prop="sex" label="性别:">
                                <el-select v-model="eform.sex" placeholder="性别">
                                    <el-option label="男" value=0></el-option>
                                    <el-option label="女" value=1></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="role" label="人员类别:">
                                <el-select v-model="eform.role" placeholder="人员类别">
                                    <el-option label="外来人员" value=0></el-option>
                                    <el-option label="本科生" value=1></el-option>
                                    <el-option label="研究生" value=2></el-option>
                                    <el-option label="教工" value=3></el-option>
                                    <el-option label="职工" value=4></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 电话-->
                            <el-form-item prop="apartment" label="住址:">
                                <el-select v-model="eform.apartment" placeholder="宿舍楼" >
                                    <el-option label="北苑一号宿舍楼" value="A1"></el-option>
                                    <el-option label="北苑一号宿舍楼" value="A1"></el-option>
                                    <el-option label="北苑二号宿舍楼" value="A2"></el-option>
                                    <el-option label="北苑三号宿舍楼" value="A3"></el-option>
                                    <el-option label="北苑四号宿舍楼" value="A4"></el-option>
                                    <el-option label="北苑五号宿舍楼" value="A5"></el-option>
                                    <el-option label="北苑六号宿舍楼" value="A6"></el-option>
                                    <el-option label="北苑七号宿舍楼" value="A7"></el-option>
                                    <el-option label="北苑八号宿舍楼" value="A8"></el-option>
                                    <el-option label="北苑九号宿舍楼" value="A9"></el-option>
                                    <el-option label="南苑一号宿舍楼" value="B1"></el-option>
                                    <el-option label="南苑二号宿舍楼" value="B2"></el-option>
                                    <el-option label="南苑三号宿舍楼" value="B3"></el-option>
                                    <el-option label="南苑四号宿舍楼" value="B4"></el-option>
                                    <el-option label="南苑五号宿舍楼" value="B5"></el-option>
                                    <el-option label="南苑六号宿舍楼" value="B6"></el-option>
                                    <el-option label="南苑七号宿舍楼" value="B7"></el-option>
                                    <el-option label="南苑八号宿舍楼" value="B8"></el-option>
                                    <el-option label="南苑九号宿舍楼" value="B9"></el-option>
                                    <el-option label="南苑十号宿舍楼" value="B10"></el-option>
                                    <el-option label="南苑十二号宿舍楼" value="B12"></el-option>
                                    <el-option label="教职公寓" value="C1"></el-option>
                                    <el-option label="校外" value="D1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="phone" label="电话:">
                                <el-input v-model="eform.phone"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
            <el-button @click="edit = false">取 消</el-button>
            <el-button type="primary" @click="edit = false,updatePerson('editForm')">确 定</el-button>
          </span>
                    </el-dialog>
                </div>
            </el-card>
        </el-row>
        <el-row>
            <el-divider content-position="left">Excel 导入</el-divider>
            <el-card>
                <el-row class="mb20">
                    <el-upload
                            action="/xxx/xxx"
                            accept=".xls, .xlsx"
                            :on-change="impotExcel"
                            :auto-upload="false"
                            multiple
                            :limit="1"
                            :file-list="fileList"
                    >
                        <el-button size="small" :plain="true" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传 .xls .xlsx 文件，且不超过500kb</div>
                    </el-upload>
                    <el-button size="small" type="primary" @click="getMessage()">确认保存</el-button>
                </el-row>
            </el-card>
        </el-row>
        <el-divider content-position="left">数据分析</el-divider>
        <el-row class="mb20">
            <el-card>
                <div id="histogram_grade" style="height:500px;"></div>
            </el-card>
        </el-row>
        <el-row class="mb20">
            <el-card>
                <div id="histogram_apartment" style="height:500px;"></div>
            </el-card>
        </el-row>
        <el-row :gutter="20">
            <el-col :lg="12" :xl="16" class="mb20">
                <el-card>
                    <div id="pie_grade" style="height:400px;"></div>
                </el-card>
            </el-col>
            <el-col :lg="12" :xl="8" class="mb20">
                <el-card>
                    <div id="pie_apartment" style="height:400px;"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import XLSX from 'xlsx'
    import getPerson from "../plugins/getPerson";
    import getPersonWithPhone from "../plugins/getPersonWithPhone"
    import setPerson from "../plugins/setPerson";

    var list = []
    export function validateAccountNumber (str) {
        const reg = /^([1-9]{1})$/
        return reg.test(str)
    }
    export default {

        data () {
            let num = /^(0|\+?[1-9][0-9]*)$/
            let isNum = (rule, value, callback) => {
                if (!num.test(value)) {
                    return callback(new Error('格式错误'))
                } else {
                    callback()
                }
            }
            let percent = /^(?:[1-9]?\d|100)$/
            let isPercent = (rule, value, callback) => {
                if (!percent.test(value)) {
                    return callback(new Error('请输入0-100的整数'))
                } else {
                    callback()
                }
            }
            const _this = this
            return {
                save: false,
                edit: false,
                delete_button: 1,
                update_button: 1,
                fileList: [],
                jsonData: null,
                jsonStr: '',
                setExcel: false,
                getExcel: false,
                loading: false,
                total: 0,//总页数，从后台查询
                pageNow: 1,//当前页数，默认为1
                pageSize: 5,//当前页显示的数据条数，默认为5
                tableData: null,
                multipleSelection: [],
                saveForm: {
                    id: '',
                    name: '',
                    sex: '',
                    age: '',
                    role: null,
                    apartment: '请选择',
                    phone: '',
                },
                eform: {
                    id: '',
                    name: '',
                    sex: '',
                    age: '',
                    role: null,
                    apartment: '请选择',
                    phone: '',
                },
                selectForm: {
                    id: null,
                    name: null,
                    age: null,
                    sex: null,
                    role: null,
                },
            }
        },
        mounted() {
            this.initHistogram_grade();
            this.initHistogram_apartment();
            this.initPie_grade();
            this.initPie_apartment();
        },
        methods: {
            select(){
                let list=[];
                const _this = this;
                let pageRequest = {
                    pageNow: 1,
                    pageSize: 100000,
                };
                this.$http.person.findPage(pageRequest).then((res) => {
                        //console.log(res.data);
                        for (let i=0;i<res.data.length;i++){
                            res.data[i] = getPerson(res.data[i])
                        }
                    this.tableData = res.data;
                    this.total = res.total;
                    for (let i=0;i<this.tableData.length;i++){
                        if(
                            (
                                this.selectForm.role==null
                                ||this.tableData[i].role==parseInt(this.selectForm.role)
                            )
                            &&(
                                this.selectForm.name==null
                                ||this.tableData[i].name.indexOf(this.selectForm.name)==0
                            )
                            &&(
                                this.selectForm.age==null
                                ||this.tableData[i].age==parseInt(this.selectForm.age)
                            )
                            &&(
                                this.selectForm.sex==null
                                ||this.tableData[i].sex.indexOf(this.selectForm.sex)==0
                            )
                            &&(
                                this.selectForm.id==null
                                ||this.tableData[i].id==parseInt(this.selectForm.id)
                            )
                        ){
                            list.push(this.tableData[i])
                        }
                    }
                    this.tableData=list
                });
            },
            resetSelect(){
                this.selectForm= {
                    id: null,
                    name: null,
                    age: null,
                    sex: null,
                    role: null,
                },
                    this.findAllTableDataByPage();
            },
            getRecord(id){
                this.$router.push({path:'/home/recordOfPerson',query: {id:id}})
            },
            savePerson (formName) {
                const _this = this
                this.$http.person.save(_this.saveForm).then(function (resp) {
                    if (resp.code == 2000) {
                        _this.$message.success('添加成功')
                        location.reload()
                    }else{
                        if (resp.msg=='已存在'){
                            _this.$message.success('添加失败，人员已存在')
                        }
                    }
                })
            },
            updatePerson (formName) {
                const _this = this
                _this.eform = setPerson(_this.eform)
                this.$http.person.update(_this.eform).then((resp) => {
                    if (resp.code == 2000) _this.$message.success('修改成功')
                    location.reload()
                })
            },
            getForm (id) {
                const _this = this
                this.$http.person.findOne(id).then(function (resp) {
                    _this.eform = resp.data
                    _this.eform = getPersonWithPhone(_this.eform)
                })
            },
            deletePerson (row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.person.del(row.id).then(function (resp) {
                        if (resp.code==2000){
                            location.reload();
                        }
                    })
                    this.$message({
                            type: 'success',
                            message: '删除成功!'
                        }
                    )
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            getMessage () {
                this.$confirm('此操作将保存进数据库, 是否继续?', '提示', {
                    confirmButtonText: '继续',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    })
                    for (let i=0;i<this.jsonData.length;i++)
                        this.jsonData[i] = setPerson(this.jsonData[i])
                    this.$http.person.saveFromExcel(this.jsonData).then(function (resp) {
                        if (resp.code==2000)  {
                            location.reload();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消保存'
                    })
                })
            },
            deleteMessages () {
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                            type: 'success',
                            message: '删除成功!'
                        }
                    )
                    for (let i=0;i<this.multipleSelection.length;i++)
                        this.multipleSelection[i] = setPerson(this.multipleSelection[i])
                    this.$http.person.delMgs( this.multipleSelection).then(function (resp) {
                        if (resp.code==2000) location.reload();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            impotExcel (file, fileList) {
                let that = this
                let f = file.raw
                let x
                let reader = new FileReader()
                reader.onload = function (e) {
                    let data = new Uint8Array(e.target.result)
                    var workbook = XLSX.read(data, {type: 'array'})
                    let json = XLSX.utils.sheet_to_json(workbook.Sheets.Sheet1) // 取第一个sheet
                    that.jsonData = json
                    x = json
                    that.jsonStr = JSON.stringify(json)
                    that.tableData = json
                }
                //this.$http.post("/personMessage/save",message);
                reader.readAsArrayBuffer(f)
                this.$message({
                    message: 'Excel内信息已展示至表格内',
                    type: 'success'
                })
                this.delete_button = 0
                this.update_button = 0
            },
            exportExcel () {
                //创建book
                var wb = XLSX.utils.book_new()
                //json转sheet
                var ws = XLSX.utils.json_to_sheet(this.multipleSelection, {})
                //设置列宽
                ws['!cols'] = [
                    {width: 15},
                    {width: 15},
                    {width: 30}
                ]
                var timestamp = new Date().getTime()
                //sheet写入book
                XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
                //输出
                XLSX.writeFile(wb, 'file_' + timestamp + '.xlsx')
            },
            handleSelectionChange (val) {
                this.multipleSelection = val
                //console.log(val)
            },
            findPage (page) {
                // console.log('当前页数：' + page)
                this.pageNow = page
                this.findAllTableDataByPage()
            },
            findSize (size) {
                // console.log('当前页面记录条数：' + size)
                this.pageSize = size
                this.findAllTableDataByPage()
            },
            findAllTableDataByPage () {
                let pageRequest = {
                    pageNow: this.pageNow,
                    pageSize: this.pageSize
                };
                this.$http.person.findPage(pageRequest).then((res) => {

                         //console.log(res.data);
                        for (let i=0;i<res.data.length;i++){
                            res.data[i] = getPerson(res.data[i])
                        }
                    this.tableData = res.data
                    this.total = res.total

                })
            },
            initHistogram_grade: function() {
                var chart_data;
                this.$http.person.findAll().then(function(resp) {
                    chart_data = resp.data;
                    var grade_data = [
                        {
                            man: 0,
                            woman: 0,
                            both: 0,
                        },
                        {
                            man: 0,
                            woman: 0,
                            both: 0,
                        },
                        {
                            man: 0,
                            woman: 0,
                            both: 0,
                        },
                        {
                            man: 0,
                            woman: 0,
                            both: 0,
                        },
                        {
                            man: 0,
                            woman: 0,
                            both: 0,
                        },
                    ];
                    for (let i = 0; i < chart_data.length; i++) {
                        switch (chart_data[i].role) {
                            case 0: {
                                grade_data[0].both++;
                                if (chart_data[i].sex == 0) {
                                    grade_data[0].man++;
                                } else {
                                    grade_data[0].woman++;
                                }
                                break;
                            }
                            case 1: {
                                grade_data[1].both++;
                                if (chart_data[i].sex == 0) {
                                    grade_data[1].man++;
                                } else {
                                    grade_data[1].woman++;
                                }
                                break;
                            }
                            case 2: {
                                grade_data[2].both++;
                                if (chart_data[i].sex == 0) {
                                    grade_data[2].man++;
                                } else {
                                    grade_data[2].woman++;
                                }
                                break;
                            }
                            case 3: {
                                grade_data[3].both++;
                                if (chart_data[i].sex == 0) {
                                    grade_data[3].man++;
                                } else {
                                    grade_data[3].woman++;
                                }
                                break;
                            }
                            case 4: {
                                grade_data[4].both++;
                                if (chart_data[i].sex == 0) {
                                    grade_data[4].man++;
                                } else {
                                    grade_data[4].woman++;
                                }
                                break;
                            }
                        }
                    }
                    var myChart = echarts.init(document.getElementById("histogram_grade"));
                    var option = {
                        title: {
                            text: "人员性别分布",
                        },
                        legend: {},
                        tooltip: {},
                        dataset: {
                            source: [
                                ["product", "男性", "女性", "总人数"],
                                [
                                    "本科生",
                                    grade_data[1].man,
                                    grade_data[1].woman,
                                    grade_data[1].both,
                                ],
                                [
                                    "研究生",
                                    grade_data[2].man,
                                    grade_data[2].woman,
                                    grade_data[2].both,
                                ],
                                [
                                    "教工",
                                    grade_data[3].man,
                                    grade_data[3].woman,
                                    grade_data[3].both,
                                ],
                                [
                                    "职工",
                                    grade_data[4].man,
                                    grade_data[4].woman,
                                    grade_data[4].both,
                                ],
                                [
                                    "外来人员",
                                    grade_data[0].man,
                                    grade_data[0].woman,
                                    grade_data[0].both,
                                ],
                            ],
                        },
                        xAxis: { type: "category" },
                        yAxis: {},
                        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
                    };
                    myChart.setOption(option);
                    window.addEventListener("resize", function() {
                        myChart.resize();
                    });
                });
            },
            initHistogram_apartment: function() {
                var chart_data;
                this.$http.person.findAll().then(function(resp) {
                    chart_data = resp.data;
                    var apartment_data = [];
                    for (let i = 0; i < 22; i++) {
                        apartment_data[i] = 0;
                    }
                    for (let i = 0; i < chart_data.length; i++) {
                        switch (chart_data[i].apartment) {
                            case "A1": {
                                apartment_data[0]++;
                                break;
                            }
                            case "A2": {
                                apartment_data[1]++;
                                break;
                            }
                            case "A3": {
                                apartment_data[2]++;
                                break;
                            }
                            case "A4": {
                                apartment_data[3]++;
                                break;
                            }
                            case "A5": {
                                apartment_data[4]++;
                                break;
                            }
                            case "A6": {
                                apartment_data[5]++;
                                break;
                            }
                            case "A7": {
                                apartment_data[6]++;
                                break;
                            }
                            case "A8": {
                                apartment_data[7]++;
                                break;
                            }
                            case "A9": {
                                apartment_data[8]++;
                                break;
                            }
                            case "B1": {
                                apartment_data[9]++;
                                break;
                            }
                            case "B2": {
                                apartment_data[10]++;
                                break;
                            }
                            case "B3": {
                                apartment_data[11]++;
                                break;
                            }
                            case "B4": {
                                apartment_data[12]++;
                                break;
                            }
                            case "B5": {
                                apartment_data[13]++;
                                break;
                            }
                            case "B6": {
                                apartment_data[14]++;
                                break;
                            }
                            case "B7": {
                                apartment_data[15]++;
                                break;
                            }
                            case "B8": {
                                apartment_data[16]++;
                                break;
                            }
                            case "B9": {
                                apartment_data[17]++;
                                break;
                            }
                            case "B10": {
                                apartment_data[18]++;
                                break;
                            }
                            case "B12": {
                                apartment_data[19]++;
                                break;
                            }
                            case "C1": {
                                apartment_data[20]++;
                                break;
                            }
                            case "D1": {
                                apartment_data[21]++;
                                break;
                            }
                        }
                    }
                    var myChart = echarts.init(
                        document.getElementById("histogram_apartment")
                    );
                    var dataAxis = [
                        "北一",
                        "北二",
                        "北三",
                        "北四",
                        "北五",
                        "北六",
                        "北七",
                        "北八",
                        "北九",
                        "南一",
                        "南二",
                        "南三",
                        "南四",
                        "南五",
                        "南六",
                        "南七",
                        "南八",
                        "南九",
                        "南十",
                        "南十二",
                        "教职公寓",
                        "校外",
                    ];
                    var data = [
                        apartment_data[0],
                        apartment_data[1],
                        apartment_data[2],
                        apartment_data[3],
                        apartment_data[4],
                        apartment_data[5],
                        apartment_data[6],
                        apartment_data[7],
                        apartment_data[8],
                        apartment_data[9],
                        apartment_data[10],
                        apartment_data[11],
                        apartment_data[12],
                        apartment_data[13],
                        apartment_data[14],
                        apartment_data[15],
                        apartment_data[16],
                        apartment_data[17],
                        apartment_data[18],
                        apartment_data[19],
                        apartment_data[20],
                        apartment_data[21],
                    ];
                    var yMax = Math.max(...data);
                    var dataShadow = [];
                    for (var i = 0; i < data.length; i++) {
                        dataShadow.push(yMax);
                    }

                    var option = {
                        tooltip: {},
                        title: {
                            text: "人员住宿分布",
                        },
                        xAxis: {
                            data: dataAxis,
                            axisLabel: {
                                inside: true,
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            z: 10,
                        },
                        yAxis: {
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                textStyle: {
                                    color: "#999",
                                },
                            },
                        },
                        dataZoom: [
                            {
                                type: "inside",
                            },
                        ],
                        series: [
                            {
                                type: "bar",
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "#83bff6" },
                                        { offset: 0.5, color: "#188df0" },
                                        { offset: 1, color: "#188df0" },
                                    ]),
                                },
                                emphasis: {
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 0, color: "#2378f7" },
                                            { offset: 0.7, color: "#2378f7" },
                                            { offset: 1, color: "#83bff6" },
                                        ]),
                                    },
                                },
                                data: data,
                            },
                        ],
                    };

                    // Enable data zoom when user click bar.
                    var zoomSize = 6;
                    myChart.on("click", function(params) {
                        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                        myChart.dispatchAction({
                            type: "dataZoom",
                            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                            endValue:
                                dataAxis[
                                    Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
                                    ],
                        });
                    });
                    myChart.setOption(option);
                    window.addEventListener("resize", function() {
                        myChart.resize();
                    });
                });
            },
            initPie_grade: function() {
                var chart_data;
                this.$http.person.findAll().then(function(resp) {
                    chart_data = resp.data;
                    var grade_data = [0, 0, 0, 0, 0];
                    for (let i = 0; i < chart_data.length; i++) {
                        switch (chart_data[i].role) {
                            case 0: {
                                grade_data[0]++;
                                break;
                            }
                            case 1: {
                                grade_data[1]++;
                                break;
                            }
                            case 2: {
                                grade_data[2]++;
                                break;
                            }
                            case 3: {
                                grade_data[3]++;
                                break;
                            }
                            case 4: {
                                grade_data[4]++;
                                break;
                            }
                        }
                    }
                    var myChart = echarts.init(document.getElementById("pie_grade"));
                    var option = {
                        title: {
                            text: "人员分布",
                            x: "center",
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)",
                        },
                        legend: {
                            orient: "vertical",
                            left: "left",
                            data: ["外来人员", "本科生", "研究生", "教工", "职工"],
                        },
                        series: [
                            {
                                name: "访问来源",
                                type: "pie",
                                radius: "55%",
                                center: ["50%", "60%"],
                                data: [
                                    { value: grade_data[0], name: "外来人员" },
                                    { value: grade_data[1], name: "本科生" },
                                    { value: grade_data[2], name: "研究生" },
                                    { value: grade_data[3], name: "教工" },
                                    { value: grade_data[4], name: "职工" },
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: "rgba(0, 0, 0, 0.5)",
                                    },
                                },
                            },
                        ],
                    };
                    myChart.setOption(option);
                    window.addEventListener("resize", function() {
                        myChart.resize();
                    });
                });
            },
            initPie_apartment: function() {
                var chart_data;
                this.$http.person.findAll().then(function(resp) {
                    chart_data = resp.data;
                    var apartment_data = [];
                    for (let i = 0; i < 22; i++) {
                        apartment_data[i] = 0;
                    }
                    for (let i = 0; i < chart_data.length; i++) {
                        switch (chart_data[i].apartment) {
                            case "A1": {
                                apartment_data[0]++;
                                break;
                            }
                            case "A2": {
                                apartment_data[1]++;
                                break;
                            }
                            case "A3": {
                                apartment_data[2]++;
                                break;
                            }
                            case "A4": {
                                apartment_data[3]++;
                                break;
                            }
                            case "A5": {
                                apartment_data[4]++;
                                break;
                            }
                            case "A6": {
                                apartment_data[5]++;
                                break;
                            }
                            case "A7": {
                                apartment_data[6]++;
                                break;
                            }
                            case "A8": {
                                apartment_data[7]++;
                                break;
                            }
                            case "A9": {
                                apartment_data[8]++;
                                break;
                            }
                            case "B1": {
                                apartment_data[9]++;
                                break;
                            }
                            case "B2": {
                                apartment_data[10]++;
                                break;
                            }
                            case "B3": {
                                apartment_data[11]++;
                                break;
                            }
                            case "B4": {
                                apartment_data[12]++;
                                break;
                            }
                            case "B5": {
                                apartment_data[13]++;
                                break;
                            }
                            case "B6": {
                                apartment_data[14]++;
                                break;
                            }
                            case "B7": {
                                apartment_data[15]++;
                                break;
                            }
                            case "B8": {
                                apartment_data[16]++;
                                break;
                            }
                            case "B9": {
                                apartment_data[17]++;
                                break;
                            }
                            case "B10": {
                                apartment_data[18]++;
                                break;
                            }
                            case "B12": {
                                apartment_data[19]++;
                                break;
                            }
                            case "C1": {
                                apartment_data[20]++;
                                break;
                            }
                            case "D1": {
                                apartment_data[21]++;
                                break;
                            }
                        }
                    }
                    var myChart = echarts.init(document.getElementById("pie_apartment"));
                    var option = {
                        title: {
                            text: "人员住宿分布",
                            x: "center",
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)",
                        },
                        legend: {
                            orient: "vertical",
                            left: "left",
                            right: "right",
                            data: [],
                        },
                        series: [
                            {
                                name: "访问来源",
                                type: "pie",
                                radius: "55%",
                                center: ["50%", "60%"],
                                data: [
                                    { value: apartment_data[0], name: "北苑一号宿舍楼" },
                                    { value: apartment_data[1], name: "北苑二号宿舍楼" },
                                    { value: apartment_data[2], name: "北苑三号宿舍楼" },
                                    { value: apartment_data[3], name: "北苑四号宿舍楼" },
                                    { value: apartment_data[4], name: "北苑五号宿舍楼" },
                                    { value: apartment_data[5], name: "北苑六号宿舍楼" },
                                    { value: apartment_data[6], name: "北苑七号宿舍楼" },
                                    { value: apartment_data[7], name: "北苑八号宿舍楼" },
                                    { value: apartment_data[8], name: "北苑九号宿舍楼" },
                                    { value: apartment_data[9], name: "北苑一号宿舍楼" },
                                    { value: apartment_data[10], name: "北苑二号宿舍楼" },
                                    { value: apartment_data[11], name: "北苑三号宿舍楼" },
                                    { value: apartment_data[12], name: "北苑四号宿舍楼" },
                                    { value: apartment_data[13], name: "北苑五号宿舍楼" },
                                    { value: apartment_data[14], name: "北苑六号宿舍楼" },
                                    { value: apartment_data[15], name: "北苑七号宿舍楼" },
                                    { value: apartment_data[16], name: "北苑八号宿舍楼" },
                                    { value: apartment_data[17], name: "北苑九号宿舍楼" },
                                    { value: apartment_data[18], name: "北苑十号宿舍楼" },
                                    { value: apartment_data[19], name: "北苑十二号宿舍楼" },
                                    { value: apartment_data[20], name: "教职公寓" },
                                    { value: apartment_data[21], name: "校外" },
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: "rgba(0, 0, 0, 0.5)",
                                    },
                                },
                            },
                        ],
                    };
                    myChart.setOption(option);
                    window.addEventListener("resize", function() {
                        myChart.resize();
                    });
                });
            },
        },

        created () {
            const _this = this
            this.$http.user.updateUser()
            _this.findAllTableDataByPage()
        }
    }
</script>

<style scoped>

</style>
